<template>
  <div> 
      <button @click="add">原生+1</button>
      <button @click="add1">原生带参+10</button>
      <button @click="addCount(100)">mapMutations传参100</button>
      <button @click="addCountAsync1">action原生+25</button>
      <button @click="addCountAsync2(50)">mapActions+50</button><br />
    原生使用filter：{{$store.getters.filterList}}<br />
    mapGetters：{{filterList}}
    <hr />
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    methods: {
        // mapMutations
        ...mapMutations(['addCount']),
        // mapActions
        ...mapActions(['getAsyncCount']),

        add () {
            this.$store.commit('add')
        },
        add1 () {
            this.$store.commit('addCount', 10)
        },
        addCountAsync1 () {
            this.$store.dispatch('getAsyncCount', 25)
        },
        addCountAsync2 (payload) {
            this.$store.dispatch('getAsyncCount', payload)
        }
    },
    computed: {
        ...mapGetters(['filterList'])
    }

}
</script>

<style>

</style>